<template>
    <Tabs :value="activeId" @click="changeTab" class="db-class">
        <TabPane v-for="db in dbList" :key="db.id" :label="db.name" :name="db.id">
            <Tables :id="db.id" :tableName="tableName" :ref="'tables-' + db.id"></Tables>
        </TabPane>
        <div slot="extra" class="tab-ext">
            <Input suffix="ios-search" placeholder="table name" v-model="tableName" style="width: auto;" />
            <Button type="primary">add db</Button>
            <Button @click="sync">sync</Button>
        </div>
    </Tabs>
</template>

<script>
    import Tables from './Tables'
    export default {
        data(){
          return {
              id: this.$route.params.id,
              dbList:[],
              activeId: '',
              tableName: ''
          }
        },
        components:{
            Tables
        },
        created(){
            this.$axios.post('/mdo/api/v1/appDb/pages', {
                filters:[{
                    field: 'appId',
                    operator: 'EQ',
                    value: this.id
                }]
            }).then(res => {
                this.dbList = res.data.list;
                if (this.dbList && this.dbList.length > 0) {
                    this.activeId = this.dbList[0].id;
                }
            });
        },
        methods:{
            changeTab(id){
                this.activeId = id;
            },
            sync(){
                this.$axios.put('/mdo/api/v1/app/db/sync/' + this.activeId).then(res=>{
                    if (res.data === 1) {
                        this.$Message.success('success');
                        this.$refs['tables-' + this.activeId][0].search({
                            filters:[{
                                field: 'dbId',
                                operator: 'EQ',
                                value: this.activeId
                            },{
                                field: 'tableName',
                                operator: 'LIKE',
                                value: this.tableName
                            }]
                        });
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .tab-ext{
        display: flex;
        align-items: center;
        margin-top: 8px;
        &>*{
            margin-left: 8px;
        }
    }
</style>